<template>
  <div>
    <div class="contains">
      <div class="top">
        <div class="title">
          <slot name="title"></slot>
        </div>
        <div class="btn">
          换一换
        </div>
      </div>

      <ul class="list">
        <li class="item" v-for="item in data" :key="item.id">
          <slot :item="item"></slot>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

<style lang="less" scoped>
.contains {
  padding: 5px;
  background-color: #f4f6fa;

  .top {
    background: linear-gradient(to right, #3375f6, #74d1fb);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    color: #fff;
    padding: 0 15px;
  }

  .list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;

    .item {
      list-style: none;
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #f4f6fa;
      padding: 5px;
      margin: 0 20px;
      color: #79818b;
    }
  }
}
</style>